<template>
	<view class="list">
		<view class="item">
			<view class="name-wrap s-flex-r-s-s">
				<image class="avatar" :src="$IMG_URL+details.image" mode=""></image>
				<view class="r flex1">
					<view class="name">
						{{details.name}}
					</view>
					<view class="title">
						{{details.title}}
					</view>
					<!-- details.title+'\n'+ -->
					<view class="content" @click="myCopy(details.copyText)" v-html="details.desc"></view>
					<view class="imgs s-flex-r-s-s u-flex-wrap">
						<view class="img" @click.stop="playVideo" v-if="details.video_img&&details.video">
							<image class="video-img" :src="$IMG_URL+details.video_img" mode=""></image>
							<view class="cover-btn s-flex-c-c-c">
								<u-icon name="play-right-fill"  size="50" color="#ffffff"></u-icon>
							</view>
						</view>
						<image class="img" @click="prev(i,details.images)" :src="$IMG_URL+m" mode="" v-for="(m,i) in details.images" :key="m"></image>
					</view>
					<view class="time-wrap s-flex-r-b-c">
						<text class="time">{{$u.timeFormat(details.createtime, 'yyyy-mm-dd hh:MM')}}</text>
						<image  @click.stop="shareImg" class="icon" src="/static/images/memberCard/share.png" mode=""></image>
					</view>
				</view>
			</view>
			
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="14" :closeOnClickOverlay="false">
			<view class="box">
				<view class="title">
					分享
				</view>
				<u-icon @click="show=false" class="close" color="#999999" name="close"></u-icon>
				<view class="shareBox s-flex-r-c-c">
					<view class="shareDiv">
						<button class="btn s-flex-c-s-c" open-type="share">
							<image class="img" src="/static/images/indexnew/wx.png" />
							<text>分享给好友</text>
						</button>
					</view>
<!-- 					<view class="shareDiv">
						<button class="btn s-flex-c-s-c" open-type="share">
							<image class="img" src="/static/images/indexnew/wx-circle.png" />
							<text>分享到朋友圈</text>
						</button>
					</view> -->
				</view>
			</view>
		</u-popup>
		<u-popup v-model="show1" mode="bottom" height="100%" @close="closeVideo" :closeable="true" :mask="true" :mask-close-able="true" :closeOnClickOverlay="false">
			<view class="my-video-wrap s-flex-c-c-c">
				<!-- https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4 -->
				<video ref="myVideo" class="my-video" :poster="$IMG_URL+details.video_img" :src="$IMG_URL+details.video"
				                    controls></video>
									<button  @click="download($IMG_URL+details.video)">视频下载</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				show1: false,
				videoContext: null,
				details:{}
			};
		},
		onLoad(e) {
			if(e.id){
				this.id=e.id
				this.getData()
			}
		},
		// 分享到微信好友
		onShareAppMessage() {
		  return {
			title: '贯宠',
			path: `/pages/index/sourceMaterial/sourceMaterialDetails?id=${this.id}`
		  }
		},
		// 分享到朋友圈
		onShareTimeline() {
		  return {
			title: '贯宠',
			path: `/pages/index/sourceMaterial/sourceMaterialDetails?id=${this.id}`
		  }
		},
		methods:{
			async download(fileurl) {
				let that = this
			    await uni.showLoading({
					title: '下载中'
				})
				let filePath = wx.env.USER_DATA_PATH + '/' + new Date().getTime() +'.mp4'
				//将远程文件下载到小程序内存中
				uni.downloadFile({
					url: fileurl,//临时路径
					filePath: filePath,//指定路径，去文件管理的微信中查看
					success(res) {
					   // 2 成功下载后而且状态码为200时将视频保存到本地系统
					   if (res.statusCode === 200) {
						  uni.saveVideoToPhotosAlbum({
						  // filePath: res.tempFilePath,
						  filePath: filePath,
						  success(res) {
							 console.log(res, 'success')
						  },
						  fail(error) {
							 console.log(error, 'error')
						  }
					   })
					   uni.hideLoading();
					   // 提示用户下载成功
					   uni.showToast({
						  title: "下载成功",
						  icon: "success"
					   });
				     }
					 // 如果该资源不可下载或文件格式出错则提示用户
					 else {
						uni.showToast({
							title: "资源格式错误，请联系管理员"
						});
					 }
					},
					fail: (err) => {
						// 下载失败提醒
						uni.hideLoading();
						uni.showToast({
							title: "下载失败"
						})
					}
				})
								
			},
			prev(i,urls){
				uni.previewImage({current:i,urls:urls.map(i=>(this.$IMG_URL+i))})
			},
			//分享按钮
			shareImg() {
				this.show = true;
			},
			getData(){
				this.$http('user.getMaterialDetails', {id:this.id}).then(res => {
					if(res.data){
						res.data.images=res.data.images.split(',')
						this.details = res.data
						this.details.copyText=this.details.title+'\n'+this.details.desc
					}
				});
			},
			playVideo(item) {
				this.show1 = true;
				this.videoContext.play();
			},
			closeVideo(item) {
				this.videoContext.stop();
			}
		}
	}
</script>

<style lang="scss">
	.my-video-wrap{
		width: 100%;
		height: 100%;
	}
	.my-video{
		width: 750rpx;
		margin-bottom: 10rpx;
	}
	.s-flex-wrap{
		  flex-wrap: wrap;
	  }
	  .s-flex-r-s-s {
	    display: flex;
	  }
	  .s-flex-r-s-c {
	    display: flex;
	    align-items: center;
	  }
	  .s-flex-r-e-c {
	    display: flex;
	    justify-content: flex-end;
	    align-items: center;
	  }
	
	  .s-flex-r-c-c {
	    display: flex;
	    justify-content: center;
	    align-items: center;
	  }
	
	  .s-flex-r-b-c {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	  }
	  .s-flex-r-b-s {
	    display: flex;
	    justify-content: space-between;
	    align-items: flex-start;
	  }
	  .s-flex-r-b-e {
	    display: flex;
	    justify-content: space-between;
	    align-items: flex-end;
	  }
	
	  .s-flex-c-s-s {
	    display: flex;
	    flex-direction: column;
	  }
	
	  .s-flex-c-s-c {
	    display: flex;
	    flex-direction: column;
	    justify-content: flex-start;
	    align-items: center;
	  }
	
	  .s-flex-c-b-s {
	    display: flex;
	    flex-direction: column;
	    justify-content: space-between;
	    align-items: flex-start;
	  }
	
	  .s-flex-c-c-c {
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	  }
	  .s-flex-c-s-e {
	    display: flex;
	    flex-direction: column;
	    justify-content: flex-start;
	    align-items: flex-end;
	  }
	  .s-flex-c-e-c {
	    display: flex;
	    flex-direction: column;
	    justify-content: flex-end;
	    align-items: center;
	  }
	  .flex1{
		  flex: 1;
	  }
	
.list{
	padding: 20rpx 0;
	.item{
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin:0 auto;
		margin-bottom: 20rpx;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		.name-wrap{
			.avatar{
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
				margin-right: 18rpx;
			}
			.name{
				font-weight: 500;
				font-size: 28rpx;
				color: #121072;
				line-height: 33rpx;
			}
			.title{
				padding: 20rpx 0 4rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				line-height: 33rpx;
			}
			.content{
				padding: 18rpx 0;
				font-size: 28rpx;
				color: #333333;
				line-height: 33rpx;
			}
			.imgs{
				.img{
					width: 172rpx;
					height: 172rpx;
					margin-right: 22rpx;
					margin-bottom: 22rpx;
					position: relative;
					&:nth-child(3n){
						margin-right: 0rpx;
					}
					.video-img{
						width: 100%;
						height: 100%;
					}
					.cover-btn{
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
						background: rgba(0, 0, 0, 0.4);
					}
				}
			}
			.time-wrap{
				.time{
					font-size: 24rpx;
					color: #666666;
					line-height: 28rpx;
				}
				.icon{
					width:28rpx;
					height:28rpx;
				}
			}
		}
	}
}
.box{
		position: relative;
		.close{
			position: absolute;
			top: 42rpx;
			right: 32rpx;
		}
		.title{
			text-align: center;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			line-height: 108rpx;
			margin-bottom: 20rpx;
		}
	}
	.shareBox {
		padding: 30rpx 96rpx;

		.shareDiv {
			display: inline-block;
			margin: 20rpx;
			font-size: 28rpx;
			color: #999999;
			text-align: center;

			.img {
				width: 108rpx;
				height: 108rpx;
				margin-bottom: 10rpx;
			}
			.btn{
				border: none !important;
				background: none !important;
				font-size: 28rpx !important;
				box-shadow: none !important;
				&:after{
					border: none;
				}
			}
		}
	}
</style>
